import './style.css'
import * as THREE from 'three';
import WebGL from 'three/addons/capabilities/WebGL.js';
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
/* 导入GUI */
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

/* 场景 */
const scene = new THREE.Scene();
/* 透视摄像机 */
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
/* 渲染器 */
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 材质 
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const parentMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff0000 });
// 设置父元素的材质为线框模式
parentMaterial.wireframe = true;
// 网格 
let parentCube = new THREE.Mesh(geometry, parentMaterial)
const cube = new THREE.Mesh(geometry, material);
parentCube.add(cube)
// cube.position.x = 2
parentCube.position.set(-3, 0, 0)
cube.position.set(3, 0, 0)
// 立方体缩放
// cube.scale.set(2,2,2)
// 旋转
parentCube.rotation.x = Math.PI / 4;
cube.rotation.x = Math.PI / 4;


//添加到场景
scene.add(parentCube);

camera.position.z = 5;
camera.position.y = 2;
camera.position.x = 2;
camera.lookAt(0, 0, 0)

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数 
controls.dampingFactor = 0.01;
// 自动旋转
// controls.autoRotate = true;

function animate() {
  requestAnimationFrame(animate);
  controls.update()
  // 旋转动画
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}
// webgl兼容性检查
if (WebGL.isWebGLAvailable()) {
  animate();
} else {
  const warning = WebGL.getWebGLErrorMessage();
  document.getElementById('app').appendChild(warning);

}


/* 动态窗口 */
window.addEventListener('resize', function () {
  // 重置浏览器宽高比
  renderer.setSize(this.window.innerWidth, this.window.innerHeight);
  //重置相机宽高比
  camera.aspect = this.window.innerWidth / this.window.innerHeight;
  // 更新相机投影矩阵
  camera.updateProjectionMatrix();
})

let eventObj ={
  FullCreen:function(){
    document.body.requestFullscreen()
    console.log('全屏');
  },
  ExitFullscreen :function(){
    document.exitFullscreen();
    console.log('退出全屏');
  }

}

// 创建GUI
const gui = new GUI();
gui.add(eventObj,"FullCreen").name('全屏')
gui.add(eventObj,"ExitFullscreen").name('退出全屏')

// 控制立方体位置
let folder = gui.addFolder('立方体的位置')
// gui.add(cube.position,"x",-5,5).name("立方体x轴的位置")
folder.add(cube.position,"x").min(-10).max(10).step(1).name("立方体x轴的位置").onChange(function(val){
  console.log(val);
})
folder.add(cube.position,"y").min(-10).max(10).step(1).name("立方体y轴的位置").onFinishChange(function(val){
  console.log(val);
})
folder.add(cube.position,"z").min(-10).max(10).step(1).name("立方体z轴的位置")


gui.add(parentMaterial,'wireframe').name('父元素线框模式')

let colorParams={
  cubeColor :'#00ff000'
}
gui.addColor(colorParams,'cubeColor').name('立方体颜色').onChange((val)=>{
  cube.material.color.set(val)
})